<script setup>
const tableData = [
  {
    name: 'Tom',
    ip: '192.168.0.1',
    port: '22',
  },
  {
    name: 'Tom',
    ip: '192.168.0.1',
    port: '22',
  },
  {
    name: 'Tom',
    ip: '192.168.0.1',
    port: '22',
  },
  {
    name: 'Tom',
    ip: '192.168.0.1',
    port: '22',
  },
  {
    name: 'Tom',
    ip: '192.168.0.1',
    port: '22',
  },
]
</script>

<template>
  <div class="guards-header">
    <el-input clearable style="width: 210px"/>
    <el-button type="primary">Query</el-button>
    <el-button type="primary">New</el-button>
  </div>
  <div class="guards-main">
    <el-table :data="tableData" border style="width: 100%;">
      <el-table-column prop="name" label="Name" />
      <el-table-column prop="content" label="Content" width="280" />
      <el-table-column label="Operations" width="350">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            Details
          </el-button>
          <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
            Edit
          </el-button>
          <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
          >
            Delete
          </el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="guards-footer">
    <el-pagination layout="total, sizes, prev, pager, next, jumper" :total="1000" />
  </div>
</template>

<style scoped>

</style>